@extends('layouts.app')

@section('title', '商品列表')
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-body product-info">
                        <div class="row">
                            <div class="col-sm-5 cover">
                                <img src="{{$product->image}}">
                            </div>
                            <div class="col-sm-7">
                                <div class="title h4">{{$product->title}}</div>
                                <div class="price">
                                    <label>价格：</label>
                                    <em>￥</em>
                                    <span>{{$product->price}}</span>
                                </div>
                                <div class="sales_and_reviews">
                                    <div class="sold_count col-xs-4">累积销量<span>{{$product->sold_count}}</span></div>
                                    <div class="sold_count col-xs-4">累积评价<span>{{$product->review_count}}</span></div>
                                    <div class="sold_count col-xs-4">评分<span>{{$product->rating}}</span></div>
                                </div>
                                <div class="skus">
                                    <label>选择</label>
                                    <div class="btn-group" data-toggle="buttons">
                                        @foreach($product->skus as $sku)
                                            <label class="btn btn-default"
                                                   data-price="{{$sku->price}}"
                                                   data-stock="{{$sku->stock}}"
                                                   data-toggle="tooltip"
                                                   data-original-title="{{$sku->description}}"
                                                   data-placement="bottom"
                                            >
                                                <input type="radio" name="sku_id" value="{{$sku->id}}">{{$sku->title}}
                                            </label>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="cart_amount">
                                    <label>数量</label>
                                    <input class="form-control input-sm" value="1">
                                    件
                                    <span class="stock"></span>
                                </div>
                                <div class="buttons">
                                    {{--<button class="btn btn-success btn-favor">收藏</button>--}}
                                    <switch-button :active="{{$active+0}}" :buttons='{{json_encode([
                                            [
                                                'text'=>'<div  class="btn btn-success">收藏</div>',
                                                'url'=>route('products.favor', $product->id),
                                                'method'=>'post',
                                                'fok'=>'fok',
                                                'ferror'=>'ferror',
                                            ],
                                            [
                                                'text'=>'<div  class="btn btn-danger">取消收藏</div>',
                                                'url'=>route('products.disfavor', $product->id),
                                                'method'=>'delete',
                                                'fok'=>'fok',
                                            ]
                                        ])}}'>
                                    </switch-button>
                                    <button class="btn btn-primary btn-add2cart">加入购物车</button>
                                </div>
                            </div>
                        </div>
                        <div class="product-detail navbar">
                            <ul class="nav nav-tabs">
                                <li class="active"><a href="#description" data-toggle="tab">商品详情</a></li>
                                <li class=""><a href="#rating" data-toggle="tab">用户评价</a></li>
                            </ul>
                            <div class="tab-content tab-content-zhaiduting">
                                <div class="tab-pane fade in active" id="description" >{!! $product->description !!}</div>
                                <div class="tab-pane fade " id="rating">未完成……</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('body')
    <script>
        $('[data-toggle=tooltip]').tooltip({trigger: 'hover'});
        $('.skus .btn-group>.btn').click(function(){
            var label=$(this)
            $('.price>span').text(label.data('price'))
            $('.stock').text('　库存：'+label.data('stock')+'件')
        })
    </script>
@endpush

@push('body')
    <script>
        function fok(res){
            res=res.data;
            swal(res.msg, '', res.icon)
        }
        function ferror(error){
            if (error.response && error.response.status === 401) {
                swal('请先登录', '', 'error');
            }
        }
    </script>
@endpush

@push('body')
    <script>
        $('.btn-add2cart').click(function(){
            axios.post('/cart', {
                sku_id: $('input[name=sku_id]:checked').val(),
                amount: $('.cart_amount input').val(),
            }).then(
                function(res){
                    swal('已加入购物车', '', 'success');
                },
                function(error){
                    var status=error.response.status;
                    var msg='系统错误';
                    switch(status){
                        case 422:{
                            error=error.response.data.errors;
                            msg='';
                            for(key in error){
                                msg+=error[key][0];
                                break;  //标题太长不好看，所以只显示第一条错误
                            }
                            break;
                        }
                        case 401:{
                            msg='请先登录'
                            break;
                        }
                    }
                    swal(msg, '', 'error');
                }
            )
        })
    </script>
@endpush